<template>
	<!-- PC端注册 -->
	<a-layout class="login-box" v-if="!isMobile"
		:style="{ backgroundImage: `url(${handleImg('login-banner.png')})`, backgroundRepeat: 'no-repeat' }">
		<a-layout-content class="login-content">
			<div class="logo"
				:style="{ backgroundImage: `url(${handleImg('login-logo.png')})`, backgroundRepeat: 'no-repeat' }">
				<img src="@/assets/img/console/logo-text.png" alt="">
			</div>
			<div class="login-content-main" v-if="!findPwd">
				<div class="login-content-form">
					<!-- 右上角二维码 -->
					<div class="qr-code" @click="setLoginState('qrcode')" v-if="!getShow">
						<svg-icon name="icon_qrcode_login" style="width: 90px;height: 90px;" />
					</div>

					<!-- 右上角手机号登录 -->
					<div class="qr-code" @click="setLoginState('login')" v-if="getShow">
						<svg-icon name="icon_mobile_login" style="width: 90px;height: 90px;" />
					</div>

					<LoginForm @findPwd="goFindPwd" />
					<RegisterForm />
					<QrCode v-if="getShow" />
				</div>
			</div>

			<!-- 忘记密码 -->
			<div class="login-content-main" v-if="findPwd">
				<div class="login-content-form">
					<FindPwd @goLogin="goLogin" />
				</div>
			</div>
		</a-layout-content>
	</a-layout>

	<!-- 移动端注册 -->
	<a-layout v-if="isMobile" class="mobile-box">
		<MobileRegister />
	</a-layout>
</template>

<script setup>
import { computed, ref, onMounted } from 'vue'
import { useLoginState } from '@/hooks/sys/useLogin.js'
import LoginForm from './components/LoginForm.vue'
import RegisterForm from './components/RegisterForm.vue'
import QrCode from './components/QrCode.vue'
import FindPwd from './components/FindPwd.vue'
import MobileRegister from './components/MobileRegister.vue'
import { getQueryString } from '@/libs/util.common'
import { useRoute } from 'vue-router'
const route = useRoute()
const type = ref('')
type.value = route.query.type

const { setLoginState, getLoginState } = useLoginState()

const getShow = computed(() => {
	return getLoginState.value === 'qrcode'
})

const findPwd = ref(false)

const goFindPwd = () => {
	findPwd.value = true
}

const goLogin = () => {
	findPwd.value = false
	setLoginState('login')
}

// 登录页面判断一下是否是移动端
const isMobile = ref(false)
function _isMobile() {
	let flag = navigator.userAgent.match(
		/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
	);
	// return flag;
	isMobile.value = flag
}

// _isMobile()
if (getQueryString('user') || type.value == 'register') {
	setLoginState('register')
}else  {
	setLoginState('login')
}

onMounted(() => {
	_isMobile()
	let width = 1440
	if (isMobile.value) {
		width = 375
	}
	let html = document.documentElement;
	html.style.fontSize = 100 * (html.clientWidth / width) + "px";
	// 监听 window 的 resize 事件．在浏览器窗口变化时再设置下区域高度．
	window.onresize = () => {
		let html = document.documentElement;
		html.style.fontSize = 100 * (html.clientWidth / width) + "px";
	};


})

</script>

<style lang="scss" scoped>
.login-box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-size: 100% 100%;
	padding: 0 1.18rem;

	.login-content {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.logo {
			width: 5.86rem;
			height: 5.73rem;
			background-size: 100% 100%;
			margin-right: 1.2rem;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				display: block;
				width: 2.65rem;
				height: 1.26rem;
			}
		}

		.login-content-main {
			width: 5.02rem;
			height: 5.18rem;

			.login-content-form {
				height: 100%;
				padding: 0.55rem 0.5rem 0;
				border-radius: 0.08rem;
				overflow: hidden;
				box-sizing: border-box;
				background: #D9E5FB;
				position: relative;

				.qr-code {
					position: absolute;
					top: 15px;
					right: 15px;
				}
			}
		}
	}
}

.mobile-box {
	width: 100%;
	height: 100%;
}
</style>
